<template>
  <div>
    <el-dialog
      :title="title"
      :width="dialogWidth"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="visible"
    >
      <el-form
        :model="inputForm"
        ref="inputForm"
        v-loading="loading"
        :class="method==='view'?'readonly':''"
      >
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item
              label="房产类型:"
              label-width="110px"
            >
              <label style="font-size:18px;">{{item.projectBuildingName}}</label>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="应缴月份:"
              label-width="90px"
            >
              <label style="color:red;font-size:18px;">{{item.writeDate}}</label>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="本月总用量:">
              <label style="font-size:18px;">{{item.allTotalPoint}}</label>
            </el-form-item>
          </el-col>
          <el-col :span="3">

          </el-col>
          <el-col>
            <el-col :span="6">
              <el-form-item
                label="公表类型:"
                label-width="110px"
              >
                <template v-if="!isChangeMeterType">
                  <label style="font-size:18px;">{{item.meterType==1?'电表':'水表'}}</label>
                </template>
                <template v-if="isChangeMeterType">
                  <el-select
                    v-model="item.meterType"
                    @change="getList"
                  >
                    <el-option
                      label="电表"
                      :value="1"
                    ></el-option>
                    <el-option
                      label="水表"
                      :value="2"
                    ></el-option>
                  </el-select>
                </template>
                <!-- <el-input v-model="inputForm.meterType"></el-input> -->
                <!-- <el-select
                  v-model="item.meterType"
                  disabled
                >
                  <el-option
                    label="电表"
                    :value="1"
                  ></el-option>
                  <el-option
                    label="水表"
                    :value="0"
                  ></el-option>
                </el-select> -->
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="抄表时间:"
                label-width="90px"
              >
                <label style="font-size:18px;">{{item.writeTime}}</label>
                <!-- <el-input v-model="item.meterDate"></el-input> -->
                <!-- <el-date-picker
                  v-model="item.writeTime"
                  type="month"
                  placeholder="选择月"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                >
                </el-date-picker> -->
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="房产楼号/区域:">
                <label style="font-size:18px;">{{item.projectFloorNumber}}</label>
                <!-- <el-input v-model="inputForm.projectUnitId"></el-input> -->
                <!-- <el-select v-model="item.projectBuildingId">
                  <el-option
                    v-for="(item,index) in projectBuildingIdList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select> -->
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-button
                type="text"
                @click="History"
              >
                查看历史记录
              </el-button>
            </el-col>
            <avue-crud
              v-if="visible"
              :data="tableOptionModify"
              :option="option"
              @row-update="addUpdate"
              @row-del="addDelete"
            ></avue-crud>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <el-dialog
      title="查看历史记录"
      width="50%"
      :visible.sync="Historyvisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <el-form
        :model="inputForm"
        ref="inputForm"
        v-loading="loading"
        :class="method==='view'?'readonly':''"
      >
        <el-col :span="6">
          <el-form-item
            label="公表类型:"
            label-width="110px"
          >
            <label style="font-size:18px;">{{item.meterType==1?'电表':'水表'}}</label>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="应缴月份:"
            label-width="110px"
          >
            <el-date-picker
              @change="getHistory"
              v-model="HistoryWriteDate"
              type="month"
              placeholder="选择月"
              format="yyyy年MM月"
              value-format="yyyy-MM"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form>
      <avue-crud
        :data="HistoryData"
        :option="HistoryOptions"
      ></avue-crud>
    </el-dialog>
  </div>
</template>
<style>
</style>
<script>
import { tableOptionModify, HistoryOptions } from '@/const/crud/market/meter/Public/person'
import { getViewItem, viewSave, getRecordHistory } from '@/api/market/meter/Public/person'
import { getDicType } from '@/api/common'
export default {
  data () {
    return {
      HistoryData: [],
      HistoryOptions: HistoryOptions,
      HistoryWriteDate: '',
      Historyvisible: false,
      title: '',
      method: '',
      dialogWidth: '50%',
      visible: false,
      tableOptionModify: [],
      loading: false,
      inputForm: {
        id: '',
        projectBuildingId: '',
        projectUnitId: '',
        writeDate: '',
        totalPoint: '',
        totalPointd: '',
        createDate: '',
        unitPrice: '',
        meterType: '',
      },
      option: tableOptionModify,
      item: {

      },
      projectBuildingIdList: [],
      oldlist: [],
      isChangeMeterType: false
    }
  },
  components: {
  },
  methods: {
    History () {
      this.Historyvisible = true
      // console.log(this.item.writeTime)
      let oldTime = this.item.writeTime.split('-')
      // let Time = this.item.writeDate.split('-')
      let oldYear = oldTime[0]
      let oldMonth = parseInt(oldTime[1])

      if (oldMonth == 1) {
        // this.HistoryWriteDate = parseInt(oldYear) - 1 + '-12-' + oldTime[2]
        this.HistoryWriteDate = parseInt(oldYear) - 1 + '-12'
      } else {
        this.HistoryWriteDate = oldYear + '-' + ('0' + (oldMonth - 1)).substring(('0' + (oldMonth - 1)).length - 2)
      }
      this.getHistory()
    },
    getHistory () {
      getRecordHistory(Object.assign({
      }, this.item, { writeDate: this.HistoryWriteDate, writeTime: '' })).then(res => {
        if (res.data.code == 0) {
          this.HistoryData = res.data.data
        }
      })
    },
    addDelete (row, index) {
    },
    addUpdate (form, index, done, loading) {
      if (parseFloat(this.tableOptionModify[index].endPoint) >= parseFloat(this.tableOptionModify[index].startPoint)) {
        let sum = (this.tableOptionModify[index].endPoint - this.tableOptionModify[index].startPoint).toFixed(2)
        if (sum > 0) {
          this.tableOptionModify[index].totalPoint = sum
        } else {
          this.tableOptionModify[index].totalPoint = 0
        }
        let params = {
          endPoint: form.endPoint,
          startPoint: form.startPoint,
          totalPoint: this.tableOptionModify[index].totalPoint,
          id: form.id,
          meterType: this.item.meterType,
          publicMeterRelateId: this.oldlist[index].publicMeterRelateId,
          writeDate: this.item.writeDate,
          writeTime: this.item.writeTime
        }
        if (!form.id) {
          params.publicMeterId = this.oldlist[index].publicMeterId
        }
        viewSave(params).then(res => {
          this.item.totalPoint = sum
          this.$message.success('保存成功')
          loading()
          done()
        })
      } else {
        this.$message.warning('本期读数不能小于上期读数')
        loading()
        done()
        this.tableOptionModify[index].$cellEdit = true
      }
    },
    // 表头样式设置
    headClass () {
      return 'text-align: center;background:#fafafa;'
    },
    // 表格样式设置
    rowClass () {
      return 'text-align: center;'
    },
    init (method, item) {
      this.method = method
      this.isChangeMeterType = false
      // this.inputForm.id = id
      this.item = item
      if (method === 'view') {
        this.title = '查看抄表信息'
      }
      // let name = ''
      if (item.projectBuildingId == 'complex_building') {
        this.item.meterType = 2
        if (this.item.projectFloorNumber == '6号楼') {
          this.isChangeMeterType = true
        }
        // name = 'complex_building'
      } else if (item.projectBuildingId == 'exhibition') {
        this.item.meterType = 1
        // name = 'exhibition'
      }
      this.item.modifyType = 1
      this.getList()
      // getViewItem(this.item).then(res => {
      //   this.item.allTotalPoint = res.data.data.allTotalPoint
      //   res.data.data.recordVos.forEach((item, index) => {
      //     if (!item.totalPoint) {
      //       item.totalPoint = 0
      //     }
      //     item.indexid = index + 1
      //   })
      //   this.tableOptionModify = res.data.data.recordVos
      //   this.oldlist = JSON.parse(JSON.stringify(res.data.data.recordVos))
      // })
      // this.item.projectBuildingId = this.item.projectBuildingId + ""
      // getDicType(name).then(res => {
      //   this.projectBuildingIdList = res.data.data
      // })
      this.visible = true
    },
    getList () {
      getViewItem(this.item).then(res => {
        this.item.allTotalPoint = res.data.data.allTotalPoint
        res.data.data.recordVos.forEach((item, index) => {
          if (!item.totalPoint) {
            item.totalPoint = 0
          }
          item.indexid = index + 1
        })
        this.tableOptionModify = res.data.data.recordVos
        this.oldlist = JSON.parse(JSON.stringify(res.data.data.recordVos))
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.avue-crud__menu {
  display: none;
}
/deep/.avue-crud__pagination {
  display: none;
}
</style>